<template>
  <div class="container">
    <main-header :actived="2" />
    <!-- 产品分类 -->
    <div class="product-tabs">
      <switch-tab 
        :tabList="tabList" 
        :styleType="2"
        :curTabIndex="curTabIndex"
        @itemClicked="tabClicked" 
      />
    </div>

    <!-- @click="showArea" -->
    <div class="location" @click="showArea">
      <img src='../../assets/img/icon-position.png' />
      {{city}} <span>{{cityGetting?'城市获取中...':''}}</span>
    </div>
    <van-popup v-model="areaShow" position="bottom">
      <van-area 
        :area-list="areaList" 
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="areaCancel"
      />
    </van-popup>
    <!-- 主理人专场 -->
    <div class="belong-man" v-for="(item, index) in storeList[curTabIndex].stores" :key="index">
      <div 
        class="item" 
        v-for="(itemIn, idx) in item.store.ShowProducts" 
        :key="idx"
        @click="goToDetail(itemIn.Id)"
      >
        <div class="shop-name" @click.stop="goToShop(item.store.ShopBranch.Id)">
          <img :src='item.store.ShopBranch.ShopImages' />
          <h3>{{item.store.ShopBranch.ShopBranchName}}</h3>
          <i>进入商家</i>
        </div>
        <div class="img">
          <img :src='itemIn.DefaultImage' />
        </div>
        <div class="intro">
          <div class="name">{{itemIn.ProductName}}</div>
          <div class="dis">
            <p>{{itemIn.StartTime}}</p>
            <p>{{itemIn.UseNotice}}</p>
          </div>
          <div class="more">立即查看</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainHeader from 'components/content/MainHeader'
import SwitchTab from 'components/common/SwitchTab'
import area from '../../assets/js/area-self'
import areaLocationList from '../../assets/js/area-latlon'
import { getClass } from '../../network/class'
import wx from 'weixin-js-sdk'
import { Toast } from 'vant'

export default {
  name: 'Class',
  components: {
    MainHeader,
    SwitchTab,
  },
  data() {
    return {
      city: '杭州市',
      // city: '宁波市',
      cityGetting: false,
      location: {
        // 杭州
        lat: '30.287458',
        lon: '120.15358',
        // 宁波
        // lat: '29.899346',
        // lon: '121.553912',
      },
      areaList: {},
      areaShow: false,
      curTabIndex: 0,
      tabList: [
        'TITIKA',
        '合作场馆',
        '往期课程'
      ],
      storeList: [
        {stores: [], type: 'main'}, // 官方门店及课程
        {stores: [], type: 'other'}, // 其他门店及课程
        {stores: [], type: 'past'}, // 往期门店及课程
      ],
    }
  },
  mounted() {
    
    // 普通浏览器
    if(localStorage.getItem('browserType') === ''){
      this.getClass()
    }
    // 微信端H5
    if(localStorage.getItem('browserType') === 'wechat'){
      wx.ready(async () => {
        try{
          this.cityGetting = true
          this.location = await this.getLocation()
          this.city = await this.getCity(this.location)
          this.cityGetting = false

          this.getClass()
        } catch(e) {
          console.log(e)
        }
      })
    }
    // 城市列表加载
    this.areaList = area
  },
  methods: {
    getLocation(){
      return new Promise((resolve, reject) => {
        wx.getLocation({
          type: 'gcj02',
          success: res => {
            console.log('获取到了定位', res.latitude, res.longitude)
            let lat = res.latitude // 纬度
            let lon = res.longitude // 经度
            resolve({lat, lon})
          },
          // 未获取到定位: 设置里关闭了微信允许访问位置信息
          fail: err => {
            Toast({
              message: '获取定位失败，请开启微信定位授权',
              duration: 5000,
            })
            this.cityGetting = false
            this.getClass()
          }
        })
      })
    },
    getCity(location){
      let geocoder = new qq.maps.Geocoder()
      let lat = location.lat
      let lon = location.lon
      return new Promise((resolve, reject) => {
        let latLng = new qq.maps.LatLng(lat, lon)
        geocoder.setComplete(geoInfo => {
          let city = geoInfo.detail.addressComponents.city
          resolve(city)
        })
        geocoder.getAddress(latLng)
      })
    },
    getClass(){
      let requestData = {
        UserKey: this.userKey,
        // fromLatLng: '29.868376,121.624166',
        fromLatLng: `${this.location.lat},${this.location.lon}`,
        pageNo: 1,
        pageSize: 50,
      }
      getClass(requestData, res => {
        let stores = res.Stores // 店列表
        this.storeList[0].stores = []
        this.storeList[1].stores = []
        stores.map(item => {
          if(item.ShopBranch.ShopId === 1){
            this.storeList[0].stores.push({
              store: item // 门店
            })
          } else {
            this.storeList[1].stores.push({
              store: item // 门店
            })
          }
        })
      })
    },
    goToDetail(id){
      this.$router.push({
        path: '/classDetail',
        query: {
          type: 'normal',
          id
        }
      })
    },
    showArea(){
      this.areaShow = true
    },
    areaCancel(){
      this.areaShow = false
    },
    areaConfirm(e){
      this.city = e[1].name
      this.location = areaLocationList[this.city]
      this.getClass()
      this.areaShow = false
    },
    tabClicked(e){
      this.curTabIndex = e
    },
    goToShop(id){
      this.$router.push({
        path: '/shop',
        query: {
          shopId: id
        }
      })
    }
  },
}
</script>

<style scoped>
.belong-man{
  margin: 5px 10px 10px 10px;
}
.belong-man .shop-name{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  font-size: 14px;
  padding: 0 10px;
}
.belong-man .shop-name img{
  width: 25px;
  height: 25px;
  margin: 0 6px;
}
.belong-man .shop-name h3{
  flex-grow: 1;
  padding: 6px;
}
.belong-man .shop-name i{
  position: relative;
  font-size: 12px;
  color: #8c8c8c;
  padding-right: 15px;
}
.belong-man .shop-name i:after{
  position: absolute;
  right: 1px;
  top: 6px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  border-top: 1px solid #8c8c8c;
  border-right: 1px solid #8c8c8c;
  transform: rotate(45deg);
}
.belong-man .item{
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #ffffff;
}
.belong-man .item .img{
  position: relative;
}
.belong-man .item .img img{
  width: 100%;
}
.belong-man .item .intro{
  padding: 15px 23px 20px 23px;
}
.belong-man .item .intro .name{
  font-size: 16px;
}
.belong-man .item .intro .dis{
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.8;
  padding: 12px 0;
}
.belong-man .item .intro .more{
  width: 125px;
  font-size: 12px;
  line-height: 30px;
  border: 1px solid #bbbbbb;
  text-align: center;
  border-radius: 30px;
}
.location{
  display: flex;
  align-items: center;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  border-radius: 6px;
  margin: 10px 10px 10px 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, .1);
  background: #ffffff;
}
.location img{
  width: 18px;
  margin-right: 10px;
}
.location span{
  font-size: 12px;
  color: #ccc;
  padding-left: 10px;
}
</style>
